<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="../../favicon.ico" rel="shortcut icon" />
<link href="../../base.css" rel="stylesheet" type="text/css" media="screen" />
<script src="../../jquery/jquery.js" type="text/javascript"></script>
<script src="../../ux/jquery.ux.js" type="text/javascript"></script>
<script src="../../align/jquery.align.js" type="text/javascript"></script>
<script src="../../ux.popdown/jquery.ux.popdown.js" type="text/javascript"></script>
<link href="../../ux.calendar/jquery.ux.calendar.css" rel="stylesheet" type="text/css" media="screen" />
<script src="../../ux.calendar/jquery.ux.calendar.js" type="text/javascript"></script>
<title>jquery.ux.popdown</title>
</head><body>

<a href="./">&laquo; Index</a>

<script type="text/javascript">
jQuery(function($){
	$('#date').popdown({ 
		showEvent: "focus",
		align: "left outside",
		html: function( $div ){
			$div.calendar({
				events: {
					select: function( ev, ms ){
						var date = new Date( ms );
						date = date.getMonth()+1 +'/'+ date.getDate() +'/'+ date.getFullYear();
						$('#date').ux("popdown.hide").val( date );
						}
					}
				});
			},
		events: { 
			show: function( ev, $div ){
				$div.ux("calendar.select", this.value );
				$div.animate({ height:'show', opacity:'show' });
				}
			}
		});
	});
</script>

<h2>ux.popdown / calendar</h2>

Date: <input type="text" id="date" />

</body></html>